<template>
  <div id="addMenu_id">
    <el-dialog title="新增菜单" :visible.sync="isShow.flag">
      <el-form :model="form" :rules="rules">
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              :label="m.title"
              :value="m.id"
              v-for="m in menuList"
              :key="m.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-if="form.type == 2?true:false">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="form.type == 1?true:false">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="菜单状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow", "menuList"],
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "80px",
      form: {
        id: 0,
        pid: "",
        title: "",
        url: "",
        icon: "",
        status: 1,
        type: 1,
      },
      rules: {
        title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    setFome(obj){
      this.form = {...obj}
    },
    submit() {
      var url = "";
      if (this.form.id === 0) {
        url = "/api/menuadd";
      } else {
        url = "/api/menuedit";
      }
      this.$http.post(url, this.form).then((res) => {
        if (res.code === 200) {
          this.form = {
            id: 0,
            pid: "",
            title: "",
            url: "",
            icon: "",
            status: 1,
            type: 1,
          };
          this.isShow.flag = false;
          this.$emit("reload_list");
        }
      });
    },
  },
};
</script>

<style>
#addMenu_id {
  text-align: left;
}
</style>